<template>
  <div class="app-container">
    <el-dialog v-model="dialogVisible" :title="title" width="90%" @closed="baseClosed" destroy-on-close :close-on-click-modal="false">
		<el-table v-loading="loading" :data="checkDetailList" @selection-change="handleSelectionChange"
		border
		:span-method="arraySpanMethod"
		size="small"
		style="height: calc(100vh - 180px);"
		>
		  <el-table-column type="index" width="55" align="center" />
		  <el-table-column label="名称|商品码" align="center" prop="goodsName" width="520" >
						<template #default="scope">
							<div v-if="scope.row.isAdd" style="text-align: left;">
								 <selectGoods lable="输入搜索商品信息:" @selectChange="goodsSelectChange"/>
							</div>
							<div v-else>
								<span>{{scope.row.goodsName}}</span>|<span>{{scope.row.goodsCode}}</span>
							</div>
						</template>
		  </el-table-column>
		  <el-table-column label="商品类型" align="center" prop="quantity" width="220">
				 <template #default="scope">
				   <dict-tag :options="bus_goods_type" :value="scope.row.goodsType"/>
				 </template>
		  </el-table-column>
		  <el-table-column label="数量" align="center" prop="quantity" width="220">
			  <template #default="scope">
				  <el-input v-model="scope.row.quantity" :disabled="planObj.endTime" @change="(val)=>tableChange(val,scope.row)" min="0" type="number"  placeholder="请输入数量" />
			  </template>
		  </el-table-column>
		  <el-table-column label="备注" align="center" prop="remark">
			  <template #default="scope">
				  <el-input v-model="scope.row.remark" :disabled="planObj.endTime" @change="(val)=>tableChange(val,scope.row)" type="text" placeholder="请输入备注信息" />
			  </template>
		  </el-table-column>
		 <el-table-column v-if="!planObj.endTime" label="操作" align="center" class-name="small-padding fixed-width">
			<template #default="scope">
			  <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['crm:checkDetail:remove']">删除</el-button>
			</template>
		  </el-table-column>
		</el-table>
    </el-dialog>
    

    <!-- 添加或修改盘点明细对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="CheckDetail">
import { listCheckDetail, getCheckDetail, delCheckDetail, saveCheckDetail,addCheckDetail,updateCheckDetail } from "@/api/crm/checkDetail";
import { getCheckPlan, } from "@/api/crm/checkPlan";
import { queryGoodsInfo } from "@/api/crm/goodsInfo";

import selectGoods from '../goods/select.vue';

const { proxy } = getCurrentInstance();

const { bus_goods_type } = proxy.useDict('bus_goods_type');

const checkDetailList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(false);
const total = ref(0);
const title = ref("");

const dialogVisible = ref(false)

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 1000,
    planId: null,
    goodsId: null,
	goodsName:null,
    goodsCode: null,
    quantity: null,
  },
  planObj:null,
  rules: {
  },
  defaultItem:{
	  isAdd:true,
	  planId: null,
	  goodsId: null,
	  goodsName:null,
	  goodsCode: null,
	  quantity: null,
	  remark: null
  }
});

const { queryParams, form,planObj, rules ,defaultItem} = toRefs(data);

const route = useRoute();


const emit = defineEmits(['closed'])


function openWin(planId,t){
	queryParams.value.planId = planId;
	title.value = t+"-盘点商品信息";
	
	setPlanObj().then(rsp=>{
		planObj.value = rsp.data;
		dialogVisible.value = true;
		
		getList();
	})
	
}

/** 查询盘点明细列表 */
function getList() {
  loading.value = true;
  listCheckDetail(queryParams.value).then(response => {
    checkDetailList.value = response.rows;
    total.value = response.total;
    loading.value = false;
	
	if(!planObj.value.endTime){
		checkDetailList.value.push(defaultItem.value);
	}
	
  });
}

function setPlanObj(){
	return getCheckPlan(queryParams.value.planId)
}


function arraySpanMethod(params){
	
	if(true==params.row.isAdd){
		//debugger
		if(params.columnIndex==1){
			return [1, 5]
		}
		return [0,0]
	}
	return [1,1]
}



function goodsSelectChange(item){
	
	//检测是否已添加
	for (var i = 0; i < checkDetailList.value.length; i++) {
		if(checkDetailList.value[i].goodsId==item.id){
			checkDetailList.value[i].quantity ++;
			return;
		}
	}
	
	const tempItem = {
		planId: queryParams.value.planId,
		goodsType:item.goodsType,
		goodsId: item.id,
		goodsName: item.goodsName,
		goodsCode: item.goodsCode,
		quantity:1
	}
	addCheckDetail(tempItem).then(rsp=>{
		checkDetailList.value.splice(checkDetailList.value.length-1,0,rsp.data);
	})

}

function tableChange(val,row){
	updateCheckDetail(row).then(rsp=>{
	})
}


// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    planId: null,
    goodsId: null,
	goodsName:null,
    goodsCode: null,
    quantity: null,
    remark: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null
  };
  proxy.resetForm("checkDetailRef");
}


/** 删除按钮操作 */
function handleDelete(row) {
 const _ids = row.id;
 proxy.$modal.confirm('是否确认删除商品编号为"' + _ids + '"的数据项？').then(function() {
   return delCheckDetail(_ids);
 }).then(() => {
   getList();
   proxy.$modal.msgSuccess("删除成功");
 }).catch(() => {});
}

/** 返回按钮操作 */
function handleClose() {
  dialogVisible.value = false;
}


function baseClosed(){
	 emit('closed')
}


defineExpose({
	openWin
})

</script>
